@import "variables";
.default-bg{
  background: color($h5,c9);
}
//订单信息
.order-info{
  margin:pxTorem(15px) 0;
  background: #FFFFFF;
  .order-title{
    height: pxTorem(88px);
    line-height: pxTorem(88px);
    border-bottom: 1px solid color($h5,c9);
    padding:0 pxTorem(30px);
    img{
      display: inline-block;
      width: pxTorem(44px);
      height: pxTorem(44px);
      border-radius: 50%;
    }
  }
  .simple-count{
    padding:0 pxTorem(30px);
    line-height: pxTorem(80px);
    text-align: right;
    @include font-dpr(26px);
    color: color($h5,c2);
    .bcolor{
      color: color($h5,c15);
    }
    .price{
      font-weight: bold;
    }

  }
  .order-content{
    padding:pxTorem(24px) pxTorem(24px) pxTorem(24px) pxTorem(30px);
    display: flex;
    border-bottom: 1px solid color($h5,c9);
    .content-img{
      width:pxTorem(160px);
      height: pxTorem(160px);
      min-width: pxTorem(160px);
      display: block;
      #seed-lazyload-img,.img-box{
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    .content-price{
     /* width: 18%;*/
      flex-shrink: 0;
      text-align: right;
      .num{
        span{
          width: pxTorem(20px);
          height: pxTorem(20px);
          display: inline-block;
          background: url(#{$icons-path}/cha.png) no-repeat;
          background-size:cover ;
        }
      }
    }
    .content-name{
      flex-grow: 2;
      @include font-dpr(28px);
      padding-left: pxTorem(20px);
      div {
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        color:color($h5,c14)
      }
    }
  }
}
// 联系方式
.tickets-form {
  .group {
    display: flex;
    padding: pxTorem(30); //  height: pxTorem(88);
    @include font-dpr(28px);
    background-color: #fff;
    .content {
      flex: 1;
    }
    em {
      display: inline-block; // width: 15%;
      width: pxTorem(120);
      margin-right: pxTorem(40);
      text-align: justify;
      color: color($h5, c3);
    }
    .clear{

      @include icon(28, 28, '#{$icons-path}/clear.png');
    }
    input,
    p {
      width: 100%;
    }
    textarea {
      font-family: STHeiti, Microsoft YaHei, Helvetica, Arial, sans-serif;
    }
    input,
    textarea,
    p {
      flex: 1;
      width: 100%;
      color: color($h5, c2);
    }
    .error-tip {
      padding-top: pxTorem(22);
      @include font-dpr(24px);
      color: color($h5, c11);
    }
  }
  .address-group {
    position: relative;
    align-items: flex-start;
    height: auto;
    padding-bottom: 0;
    textarea {
      height: pxTorem(150);
      padding: 0;
      resize: none;
      border: none;
    }
    .error-tip {
      position: absolute;
      top: pxTorem(56);
      padding-bottom: pxTorem(22);
    }
  }
  .ticket-bottom {
    background-color: #fff;
    margin-top:15px;
    &.has-error{
      height: auto;
    }
    select{
      width: 100%;
      border:none;
      color: #c1c1c1;
      background:#fff;
      font-family: STHeiti, Microsoft YaHei, Helvetica, Arial, sans-serif;
      appearance:none;
      -moz-appearance:none;
      -webkit-appearance:none;
      &.has-change {
        color:#333333;
      }
    }
    .content {
      width: 100%;
      &.has-select{
        .error-tip {
          padding-top: pxTorem(22);
          @include font-dpr(24px);
          color: color($h5, c11);
          display: block;
        }

      }
    }
  }
  .switch-group {
    // justify-content: space-between;
    margin-top: pxTorem(15);
    em {
      width: auto;
    }
    input {
      flex: inherit;
      width: auto;
    }
    &.beautify {
      position: relative;
    }
    &.beautify input[type=checkbox] {
      position: absolute;
      z-index: -1;
    }
    &.beautify label {
      position: absolute;
      right: pxTorem(30);
      top: 0;
      bottom: 0;
      width: pxTorem(80);
      height: pxTorem(50);
      margin: auto;
      border-radius: pxTorem(25);
      background-color: #d2d1d1;
    }
    &.beautify label:before {
      content: '';
      display: inline-block;
      position: absolute;
      top: 0;
      bottom: 0;
      left: pxTorem(4);
      width: pxTorem(44);
      height: pxTorem(44);
      margin: auto;
      transition: all .2s ease-out;
      border-radius: 50%;
      background-color: #fff;
    }
    &.beautify input[type=checkbox]:checked+label:before {
      left: pxTorem(32);
    }
    &.beautify input[type=checkbox]:checked+label {
      background-color: color($h5, c1);
    }
  }
  .btn-box {
    padding: pxTorem(60) pxTorem(30);
    button {
      width: 100%;
      height: pxTorem(88);
      line-height: pxTorem(88);
      border-radius: 4px;
      @include font-dpr(30px);
      color: #fff;
      background-color: color($h5, c1);
      &:disabled {
        opacity: 0.4;
      }
    }
  }

  .choose{
    margin-top:pxTorem(10px);
    top:pxTorem(60px);
    right: pxTorem(20px);
    width: pxTorem(20px);
    height: pxTorem(20px);
    display: block;
    border-top: 1px solid color($h5,c4);
    border-right: 1px solid color($h5,c4);
    border-bottom: 1px solid transparent;
    border-left: 1px solid transparent;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }

}
.order-confirm-box{
  padding-bottom: pxTorem(100px);
  seed-item{
    font-size: pxTorem(28);
    .seed-icon{
      margin-left: pxTorem(5);
      font-size: pxTorem(24);
    }
    &.seed-item-block{
      padding:0 pxTorem(30px) ;
    }
    .coupons-amount{
      color: color($h5,c4);

    }
  }
}

//支付方式
.pay-type{
  height: pxTorem(88px);
  line-height: pxTorem(88px);
  background: #FFFFFF;
  padding:0 pxTorem(30px) ;
  @include font-dpr(28px);
  color: color($h5,c2);
  span:last-child{
    float: right;
  }
}
//确认
.btn-wrap-confim-order{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  height: pxTorem(90px);
  line-height: pxTorem(90px);
  text-align: center;
  .sub-btn-pay{
    width: 30%;
    float: left;
    button{
      width:100%;
      height: pxTorem(90px);
      @include font-dpr(30px);
      background: color($h5,c1);
      color: color($h5,c10);
    }
    button[disabled]{
      opacity: 0.5;
    }

  }
  .p-info{
    width: 69.8%;
    background: #FFFFFF;
    height: 100%;
    float: left;
    line-height: pxTorem(90px);
    padding-right: pxTorem(20px);
    text-align: right;
    @include font-dpr(26px);
    color: color($h5,c2);
    .bcolor{
      color: color($h5,c15);
    }
    .price{
      @include font-dpr(36px);
    }
    .dian{
      @include font-dpr(24px);
    }
  }

}

// 优惠劵模态框

.seed-coupon-choose {
  position: relative;
  padding: 0 pxTorem(20) ;
  background-color: color($h5,c10);
  animation: bottomToTop .3s ease-out;
  height: 100%;
  seed-toolbar-header{
    position: relative;
    margin-bottom: pxTorem(30);
  }

  .coupon-explain{
    @include icon(40, 40, '#{$icons-path}/coupon_explain.png');
    position: absolute;
    top: pxTorem(30);
    left: pxTorem(30);
  }
  seed-infinite-scroll{
    overflow: scroll;
    overflow-scrolling: touch;
  }

}
.coupon-choose {
  .icon-determine{
    display: block;
  }
}
@keyframes bottomToTop {
  from {
    transform:  translateY(100%);
  }
  to {
    transform: translateY(0%);
  }
}



